<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="cn.edu.niit.javabean.Book" %><%--
  Created by IntelliJ IDEA.
  User: DaHa
  Date: 2021/3/15
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
<div class="layui-nav-item demoTable">
    <button class="layui-btn" data-type="getCheckLength"
            style="float: right">
        搜索</button>
    <input type="text" class="layui-input"
           placeholder="请输入搜索信息......"
    style="float: right;width: auto">

</div>

<% List<Book> books = new ArrayList<Book>();
    /*for (int i = 0; i < 5; i++) {
        books.add(new Book("第" + i + "本", "niit", "教材", "这是一本教材"));
    }*/
%>

<div class="layui-form" id="content">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>分类</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <c:forEach var="book" items="${sessionScope.books}"
                   varStatus="state">
            <tr>
                <td>${book.name}</td>
                <td>${book.author}</td>
                <td>${book.sort}</td>
                <td>${book.description}</td>
                <td>
                    <a class="layui-btn layui-btn-primary layui-btn-xs"
                       lay-even="detail">查看</a>
                    <a class="layui-btn layui-btn-xs"
                       lay-even="edit">借阅</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

</div>
    <div id="page" style="text-align:center;margin:0 auto;"></div>

<script src="/layui/layui.js" charset="GBK"></script>
<script>
    layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
                , layer = layui.layer;
            var $ = layui.$;
            var count = 0, page = 1, limit = 5;

            $(document).ready(function () {
                //进入页面先加载数据
                getContent(1, 10);
                //得到数量count后，渲染表格
                laypage.render({
                    elem: 'page',
                    count: count,
                    curr: page,
                    limits: [5, 10, 15, 20],
                    limit: limit,
                    layout: ['count', 'prev', 'page', 'next', 'limit'],
                    jump: function (obj, first) {
                        if (!first) {
                            getContent(obj.curr, obj.limit);
                            //更新当前页码和当前每页显示条数
                            page = obj.curr;
                            limit = obj.limit;
                        }
                    }
                });
            });

            function getContent(page, size) {
                $.ajax({
                    type: 'POST',
                    url: "/book/search",
                    async: false, //开启同步请求，为了保证先得到count再渲染表格
                    data: JSON.stringify({
                        pageNum: page,
                        pageSize: size
                    }),
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        $('#content').load(location.href + " #content");
                        //count从Servlet中得到
                        console.log(data)
                        count = data;
                    }
                });
            }

            // //监听工具条
            // table.on('tool(demo)', function (obj) {
            //     var data = obj.data;
            //     if (obj.event === 'detail') {
            //         layer.msg('ID：' + data.id + ' 的查看操作');
            //     } else if (obj.event === 'del') {
            //         layer.confirm('真的删除行么', function (index) {
            //             obj.del();
            //             layer.close(index);
            //         });
            //     } else if (obj.event === 'edit') {
            //         layer.alert('编辑行：<br>' + JSON.stringify(data))
            //     }
            // });
            //
            // var $ = layui.$, active = {
            //     getCheckData: function () { //获取选中数据
            //         var checkStatus = table.checkStatus('idTest')
            //             , data = checkStatus.data;
            //         layer.alert(JSON.stringify(data));
            //     }
            //     , getCheckLength: function () { //获取选中数目
            //         var checkStatus = table.checkStatus('idTest')
            //             , data = checkStatus.data;
            //         layer.msg('选中了：' + data.length + ' 个');
            //     }
            //     , isAll: function () { //验证是否全选
            //         var checkStatus = table.checkStatus('idTest');
            //         layer.msg(checkStatus.isAll ? '全选' : '未全选')
            //     }
            // };
            //
            // $('.demoTable .layui-btn').on('click', function () {
            //     var type = $(this).data('type');
            //     active[type] ? active[type].call(this) : '';
            // });
        }
    );
</script>


</body>
</html>
